
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width , initial-scale=1 , shrink-to-fit=no"/>
    <title>本地安装Bootstrap</title>
    <!-- 外联Bootst基本样式 -->
    <link rel="stylesheet" type="text/css" href="bootstrap-4.5.0/dist/css/bootstrap.css"/>
    <!-- 外联自定义样式文件 -->

</head>
<body>
<div id="da_div" class="container">
    <table class="table border">
        <tr class="text-center">
            <td colspan="5"><strong>用户信息表</strong></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>年龄</td>
            <td>性别</td>
            <td>职务</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>周明</td>
            <td>27</td>
            <td>男</td>
            <td>项目总监</td>
            <td>
                <input type="button" class="btn btn-warning" value="删除"/>
            </td>
        </tr>
        <tr v-for="value in ren">
            <td>{{value.xing_ming}}</td>
            <td>{{value.nian_lin}}</td>
            <td>{{value.xing_bie| sex}}</td>
            <td>{{value.zhi_wei| post_name}}</td>
            <td>
                <input type="button" class="btn btn-warning" value="删除"/>
            </td>
        </tr>


        <tr class="text-center">
            <td><input type="button" class="btn  btn-primary" value="查看全部"/></td>
            <td><input  type="button" class="btn  btn-primary" value="只查看男性"/></td>
            <td><input type="button" class="btn  btn-primary" value="只查看女性"/></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

<script src="js/vue.js"  type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var a=new Vue({
        el:'#da_div',
        data:{
             ren:[
                 {
                     xing_ming:'周明',
                     nian_lin:'27',
                     xing_bie:1,
                     zhi_wei:1,
                 }
                 ,
                 {
                     xing_ming:'朱虹',
                     nian_lin:'22',
                     xing_bie:2,
                     zhi_wei:2,
                 },
                 {
                     xing_ming:'淘小宝',
                     nian_lin:'31',
                     xing_bie:1,
                     zhi_wei:3,
                 },
                 {
                     xing_ming:'刘凯',
                     nian_lin:'20',
                     xing_bie:1,
                     zhi_wei:3,
                 }
             ],
            filters:{
               sex: function (a) {
                    if (a===1)
                    {
                        return '男';
                    }
                    else
                    {
                        return '女';
                    }
             },
                post_name:function (a) {
                    if(a === 1){
                        return '项目经理';
                    }else if(a === 2){
                        return '项目组长';
                    }else{
                        return '程序员';
                    }

                }
            }
        }

    });

</script>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- Bootstrap插件依赖文件 -->
<script src="bootstrap-4.5.0/dist/js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
<!-- jQuery插件 -->
<script src="bootstrap-4.5.0/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>
